<template>
 <div class="card-table">
    <div class="header">
        <div @click="$router.go(-1)" class="goBackIcon">
            <i class="el-icon-arrow-left" style="margin-right:1px;"></i>返回
        </div>
        <div style="margin-left:16px;">新增库存信息</div>
    </div>
    <div class="main">
      <el-form size="small" :rules="rules" ref="form" :model="form" label-width="80px">
          <el-form-item label="设备类型" prop="stockDeviceType">
              <el-select @change="selectChange" style="width:300px;" v-model="form.stockDeviceType" placeholder="请选择设备类型">
                  <el-option v-for="(item, index) in stockDeviceTypes" :key="index" :label="item.name" :value="item._id"></el-option>
              </el-select>
              <el-button @click="dialog_device=true" icon="el-icon-plus" style="margin-left:24px;" type="primary">新增设备类型</el-button>
          </el-form-item>
          <el-form-item label="规格型号" prop="specification">
              <el-select :disabled="selectType" style="width:300px;" v-model="form.specification" placeholder="请选择规格型号">
                  <el-option v-for="(item, index) in stockDeviceTypeSuppliers" :key="index" :label="item.name" :value="item._id"></el-option>
              </el-select>
              <el-tag v-if="selectType" style="margin-left:24px;" type="warning" closable>请先选择设备类型</el-tag>
              <el-button v-else @click="dialog_specif=true"  icon="el-icon-plus" style="margin-left:24px;" type="primary">新增规格型号</el-button>
          </el-form-item>
          <el-form-item label="供应商" prop="supplier">
              <el-select style="width:300px;" v-model="form.supplier" placeholder="请选择供应商">
                  <el-option v-for="(item, index) in suppliers" :key="index" :label="item.name" :value="item._id"></el-option>
              </el-select>
              <el-button @click="dialog_supplier=true"  icon="el-icon-plus" style="margin-left:24px;" type="primary">新增供应商</el-button>
          </el-form-item>
      </el-form>
      <el-dialog
        :modal-append-to-body="false"
        title="创建规格型号"
        :visible.sync="dialog_specif"
        width="30%">
        <el-form  :rules="rulesSpecif" size="small" ref="form_specif" :model="form_specif" label-width="80px">
          <el-form-item label="设备类型" prop="stockDeviceTypeId">
            <el-select style="width:300px;" v-model="form_specif.stockDeviceTypeId" placeholder="请选择设备类型">
                <el-option v-for="(item, index) in stockDeviceTypes" :key="index" :label="item.name" :value="item._id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="型号名" prop="name">
            <el-input v-model="form_specif.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="设备类型" prop="stockDeviceTypeId">
            <el-select style="width:300px;" v-model="form_specif.stockDeviceTypeId" placeholder="请选择设备类型">
                <el-option v-for="(item, index) in stockDeviceTypes" :key="index" :label="item.name" :value="item._id"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="计量单位" prop="unit">
            <el-input v-model="form_specif.unit"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form_specif')">取 消</el-button>
          <el-button type="primary" @click="created_specif()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :modal-append-to-body="false"
        title="创建设备类型"
        :visible.sync="dialog_device"
        width="30%">
        <el-form  :rules="rulesDevice" size="small" ref="form_device" :model="form_device" label-width="80px">
          <el-form-item label="设备类型" prop="name">
            <el-input v-model="form_device.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form_device')">取 消</el-button>
          <el-button type="primary" @click="created_device()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :modal-append-to-body="false"
        title="创建供应商信息"
        :visible.sync="dialog_supplier"
        width="30%">
        <el-form  :rules="rulesSupplier" size="small" ref="form_supplier" :model="form_supplier" label-width="80px">
          <el-form-item label="供应商名" prop="name">
            <el-input v-model="form_supplier.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="form_supplier.contacts"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form_supplier.phone"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form_supplier')">取 消</el-button>
          <el-button type="primary" @click="created_supplier()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="footer">
        <div style="display:inline-block;width:80px;"></div>
        <el-button @click="submitForm('form')" type="primary">提交</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
    </div>
 </div>
</template>

<script>
import { stockDeviceTypeGet, specificationGet, supplierGet, specificationCreate, stockDeviceTypeCreate, supplierCreate, stockCreate } from '@/api/spare.js'

export default {
  name: 'name',
  components: {},
  data () {
    return {
      form: {
        stockDeviceType: '',
        specification: '',
        supplier: '',
        principal: '', // 负责人
        number: '', // 出入库数量
        remark: '', // 备注
        inputPeople: ''// 当前角色
      },
      selectType: true, // 是否选择设备类型
      stockDeviceTypeSuppliers: [],
      options: [],
      dialog_device: false,
      dialog_specif: false,
      dialog_supplier: false,
      form_device: {
        name: ''
        // specificationId: []
      },
      form_specif: {
        stockDeviceTypeId: '',
        name: '',
        unit: ''
      },
      form_supplier: {
        name: '',
        contacts: '',
        phone: ''
      },
      stockDeviceTypes: [],
      specifications: [],
      suppliers: [],
      rules: {
        stockDeviceType: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        specification: [
          { required: true, message: '请选择规格型号', trigger: 'change' }
        ],
        supplier: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ]

      },
      rulesSpecif: {
        name: [
          { required: true, message: '请输入规格名', trigger: 'blur' }
        ],
        stockDeviceTypeId: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '请输入计量单位', trigger: 'blur' }
        ]
      },
      rulesDevice: {
        name: [
          { required: true, message: '请选输入设备名', trigger: 'blur' }
        ]
        // specificationId: [
        //   { required: true, message: '请选择规格型号', trigger: 'change' }
        // ]
      },
      rulesSupplier: {
        name: [
          { required: true, message: '请输入供应商名', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
  },
  created () {},
  mounted () {
    this.getAllData()
  },
  methods: {
    getAllData () {
      stockDeviceTypeGet().then(res => {
        console.log(res.data.data)
        this.stockDeviceTypes = res.data.data.pageData
      })
      supplierGet().then(res => {
        this.suppliers = res.data.data.pageData
      })
      specificationGet().then(res => {
        this.specifications = res.data.data.pageData
      })
    },
    selectChange (value) {
      if (value && value !== '') {
        const params = {
          stockDeviceTypeId: this.form.stockDeviceType
        }
        specificationGet(params).then(res => {
          this.stockDeviceTypeSuppliers = res.data.data.pageData
        })
        this.selectType = false
      } else {
        this.selectType = true
      }
    },
    submitForm (formName) {
      var that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          var stockDeviceType = that.stockDeviceTypes.filter(each => {
            return each._id === that.form.stockDeviceType
          })
          var specification = that.specifications.filter(each => {
            return each._id === that.form.specification
          })
          var supplier = that.suppliers.filter(each => {
            return each._id === that.form.supplier
          })
          const payload = {
            stockDeviceTypeId: stockDeviceType[0]._id,
            specificationId: specification[0]._id,
            supplierId: supplier[0]._id
          }
          console.log(payload)
          stockCreate(payload).then(res => {
            if (res.data.code === 200) {
              that.$message({
                message: '新增成功',
                type: 'success'
              })
              that.$router.go(-1)
            } else {
              that.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
            that.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    created_specif () {
      var that = this
      that.$refs.form_specif.validate((valid) => {
        if (valid) {
          specificationCreate(that.form_specif).then(res => {
            if (res.data.code === 200) {
              that.$message({
                type: 'success',
                message: '创建成功'
              })
              const params = {
                stockDeviceTypeId: that.form.stockDeviceType
              }
              specificationGet(params).then(res => {
                that.form.specification = res.data.data.pageData[0]._id
                that.specifications = res.data.data.pageData
                that.stockDeviceTypeSuppliers = res.data.data.pageData
              })
              that.dialog_specif = false
              that.$refs.form_specif.resetFields()
            } else {
              that.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    created_device () {
      var that = this
      that.$refs.form_device.validate((valid) => {
        if (valid) {
          stockDeviceTypeCreate(that.form_device).then(res => {
            if (res.data.code === 200) {
              that.$message({
                type: 'success',
                message: '创建成功'
              })
              // that.form.stockDeviceType = that.form_device._id
              that.selectType = false
              stockDeviceTypeGet().then(res => {
                that.stockDeviceTypes = res.data.data.pageData
                console.log(res.data.data.pageData[0])
                that.form.stockDeviceType = res.data.data.pageData[0]._id
              })
              that.dialog_device = false
              that.$refs.form_device.resetFields()
            } else {
              that.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    created_supplier () {
      var that = this
      that.$refs.form_supplier.validate((valid) => {
        if (valid) {
          supplierCreate(that.form_supplier).then(res => {
            if (res.data.code === 200) {
              that.$message({
                type: 'success',
                message: '创建成功'
              })
              supplierGet().then(res => {
                that.form.supplier = res.data.data.pageData[0]._id
                that.suppliers = res.data.data.pageData
              })
              that.dialog_supplier = false
              that.$refs.form_supplier.resetFields()
            } else {
              that.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.dialog_device = false
      this.dialog_specif = false
      this.dialog_supplier = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style  scoped>
.card-table{
    padding: 0;
}
.header{
    display: flex;
    align-items: center;
    padding: 18px;
    border-bottom: thin solid rgb(223, 223, 223);
    .goBackIcon{
        cursor: pointer;
        color: $primary;
    }
}
.main{
    padding: 20px;
}
.footer{
    padding: 20px;
}
</style>
